import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, Form,  Button, message, Modal, Input} from 'antd';
import { changePage, _maskRender } from '../../store/actions';
import SearchInput from '../../components/search-input'
const _data_= [
    {
        id:'',
        name: '股骨颈骨折',
        genderType:'A',
        modality:'DR',
        part:'股骨',
        check:'股骨'
    },{
        id:'',
        name: 'CT平扫(正常人工气腹)',
        genderType:'M',
        modality:'CT',
        part:'腹部',
        check:'腹部'
    }
];

class _pane1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            user: this.props.user,
            data: this.props.data
        };
    }
    render(){
        const rowSelection = {
            /*onChange(selectedRowKeys, selectedRows) {
             console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
             },
             onSelect(record, selected, selectedRows) {
             console.log(record, selected, selectedRows);
             },
             onSelectAll(selected, selectedRows, changeRows) {
             console.log(selected, selectedRows, changeRows);
             }*/
        };
        const columns = [{
            title: '名称',
            dataIndex: 'name',
            width:160
        }, {
            title: '适用性别',
            dataIndex: 'genderType',
            render(text){
                return text == 'A' ? '通用' : (text == 'M' ? '男' : '女')
            }
        }, {
            title: '设备类型',
            dataIndex: 'modality'
        }, {
            title: '适用部位',
            dataIndex: 'part'
        }, {
            title: '检查印象',
            dataIndex: 'check'
        },{
            title: '操作',
            render(t,record){
                return (<div>
                    <a href="#" data-id={`${record.id}`}>删除</a>
                    <span className="ant-divider"> </span>
                    <a href="#" data-id={`${record.id}`}>编辑</a>
                    <span className="ant-divider"> </span>
                    <a href="#" data-id={`${record.id}`}>详情</a>
                </div>)
            }
        }];
        const pagination = {
            total: this.state.data.length,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {
                /*console.log('Current: ', current, '; PageSize: ', pageSize);*/
            },
            onChange(current) {
                /*console.log('Current: ', current);*/
            }
        };
        return (
          <div>
              <Table
                pagination={pagination}
                columns={columns}
                rowSelection={rowSelection}
                dataSource={this.state.data}
              />
          </div>
        )
    }
}
class _TemplateManage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            active:'1',
            defaultActiveKey:'1'
        };
        this.changeTag = this.changeTag.bind(this)
    }
    componentDidMount(){
        _maskRender();
    }
    componentWillMount(){
        this.props.dispatch(changePage('template-manage'))
    }
    changeTag(e){
        this.setState({
            active:e
        })
    }
    render(){
        return (
          <div>
              <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
                  <div style={{float:'left'}}>
                      <Button style={{backgroundColor:'red',color:'#fff'}}>新建模板</Button>
                      &nbsp;&nbsp;
                      <Button>批量删除</Button>
                  </div>
                  <div style={{float:'right'}}>
                    <SearchInput style={{ width: 200 }} placeholder='请输入关键字查询' />
                  </div>
              </div>
              <_pane1 data={_data_} user={this.props.user} dispatch={this.props.dispatch} />
              <div id="_mask"></div>
          </div>
        )
    }
}
let TemplateManage;
export default TemplateManage = connect((state)=>{
    const {user} = state.rootReducer,
      {search,query} = state.routing.locationBeforeTransitions;
    return {user,search,query}
})(_TemplateManage)

